<template>
  <view>
    <text>123</text>
    <u-popup v-model="show" mode="bottom" border-radius="14">
      <view class="login">
        <template v-if="!authorization">
          <view class="user-image">
            <image class="overimage" src="@/static/img/wxlogin/user.png"></image>
          </view>
          <view class="user-tip">
            为保证更好的使用体验请登录同步数据
          </view>
          <view class="sure-btn">
            <u-button type="primary" @click="getuserinfo">使用微信授权登录</u-button>
            <!-- open-type="getUserInfo" -->
            <!-- @getuserinfo="getuserinfo" -->
          </view>
        </template>
        <template v-if='authorization'>
          <view class="user-tip">
            需要获取手机号
          </view>
          <view class="phone-tip">
            获取手机号可以帮您自动注册
            <br>
            获取手机号可以帮您查询用户信息
          </view>
          <view class="phone-image">
            <image class="overimage" src="@/static/img/wxlogin/phone.png"></image>
          </view>
          <u-button open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">授权手机号登录</u-button>
        </template>
      </view>
    </u-popup>
  </view>
</template>

<script>
/**
 *  登录逻辑
 * 1. 用户第一次登录 旧
 *    弹窗是否同意授权（调取接口获取是否已有注册）
 *    调用手机手机号授权直接注册登录、
 *    用户第一次登录 新
 *    调用login 登录后直接获取code  如果失败后获取后台给的unionId 通过手机号注册并登录
 * 2. 用户不是第一次登录。
 *    本地有token 并且rtoken 未过期的情况直接换rtoken。
 *    本地有token  rtoken token 都过期的情况  判断rtoken 刷新失败 跳到我的页面，用户点击登录。
 *    本地没有token 重复第一步 检测用户授权后登录
 *
 */

/**
 *  使用示例
 *  父组件  直接 ref 调用子组件 isLongin 方法
 */
import { loginByOpenid, getUserInfoFun, loginByMobile, getAllDictData, imLogin, getServiceInfoData } from '@/util/login.js';
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['hasLogin', 'userInfo'])
  },
  props: {
  },
  data() {
    return {
      user: null,

      customStyle: {
        background: '#51C4BB',
        color: '#FFFFFF',
        height: '48px'
      },
      // 是否显示弹窗
      show: false,
      // 登录是否授权
      authorization: false,
    }
  },
  mounted() {
    console.log('wxLogin', this)
  },
  methods: {
    isLongin() {
      // 判断是否登录状态
      if (this.hasLogin) {
        this.show = false;
        return
      } else {
        const _this = this;
        // #ifdef MP
        //微信中调用自动登录先检测是否授权
        // uni.getSetting({
        //   success (res) {
        //     if (res.authSetting['scope.userInfo']) {
        //       //用户已经授权直接获取信息
        //       _this.loginMethods()
        //       _this.authorization = true;
        //     } else {
        //       _this.show = true;
        //       _this.authorization = false;
        //     }
        //   }
        // })
        // #endif
        // 以上为旧登录的方法 
        _this.loginMethods();
        _this.authorization = true;
      }

    },
    // 获取用户授权的操作
    getuserinfo(res) {
      // if (res.detail.errMsg === "getUserInfo:fail auth deny") {
      //   uni.showToast({
      //     title: '授权失败!',
      //     icon: 'none'
      //   })
      //   return;
      // } else {
      //   this.authorization = true;
      //   this.loginMethods()
      // }
      // 以上为登录旧的逻辑
      uni.getUserProfile({
        desc: '登录同步数据',
        success: (res) => {
          this.authorization = true;
          uni.setStorageSync('UserProfile', res.userInfo);
        },
        fail: (res) => {
          console.log(res)
          uni.showToast({
            title: '授权失败!',
            icon: 'none'
          })
        }
      })
    },
    // 用户授权登录（已注册，500 后会调用手机号注册）
    loginMethods() {
      this.show = false;
      loginByOpenid().then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: '登录成功',
            icon: 'none'
          })
          //登录成功
          let token = {
            a_token: res.data.a_token,
            r_token: res.data.r_token,
          }
          this.$store.commit('SET_TOKEN', token)
          this.$store.commit('UPDATE_LOGIN_STATUS', true);
          // 获取字典
          getAllDictData();
          // 获取当前的客服
          getServiceInfoData();
        } else if (res.code == 202) {
          let unid = res.data;
          this.show = true;
          this.authorization = false;
          uni.setStorageSync('unionId', unid);
        } else if (res.code == 500) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      }).catch(error => {
        console.log(error)
        uni.showToast({
          title: '登录失败，请重新登录!',
          icon: 'none'
        })
      })
    },
    // 用户手机号登录
    getPhoneNumber(res) {
      if (res.detail.errMsg == "getPhoneNumber:fail user deny") {
        uni.showToast({
          title: '授权失败!',
          icon: 'none'
        })
        return;
      } else {
        console.log(res)
        //用户同意授权手机号
        uni.setStorageSync('cashIv', res.detail.iv);
        uni.setStorageSync('cashEncryptedData', res.detail.encryptedData);

        loginByMobile(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '登录成功',
              icon: 'none'
            })
            this.show = false;
            //登录成功
            //登录成功
            let token = {
              a_token: res.data.a_token,
              r_token: res.data.r_token,

            }
            this.$store.commit('SET_TOKEN', token)
            this.$store.commit('UPDATE_LOGIN_STATUS', true);
            // 获取字典
            getAllDictData();
            // 获取当前的客服
            getServiceInfoData();
          } else {
            uni.showToast({
              title: '登录失败，请重试！',
              icon: 'none'
            })
          }
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.login {
  padding: 45rpx;
  box-sizing: border-box;

  // 资料
  .user-image {
    width: 535rpx;
    height: 496rpx;
    margin: 0 auto;
  }

  .user-tip {
    text-align: center;
    height: 29px;
    font-size: 32rpx;
    color: #231f20;
    margin: 40rpx 0;
  }

  // 手机
  .phone-image {
    margin: 0 auto;
    width: 414rpx;
    height: 392rpx;
  }

  .phone-tip {
    margin: 85rpx auto 0;
    font-size: 28rpx;
    font-weight: bold;
    color: #7b7879;
    line-height: 48rpx;
    width: 458rpx;
    text-align: center;
  }
}
</style>



